<template>
  <div class="app-container">
    <el-table :data="listZTTJlist" border style="width: 100%">
      <el-table-column prop="typeName" label="专题名称" width="180">
      </el-table-column>
      <el-table-column prop="damlCount" label="档案目录（条）" width="180">
      </el-table-column>
      <el-table-column prop="zlmlCount" label="资料目录（条）">
      </el-table-column>
      <el-table-column prop="allCount" label="专题目录合计">
      </el-table-column>
    </el-table>


    <div style="width: 70%; height: 600px; margin: 0 auto; margin-top: 3%">
      <div id="myChart" style="width: 90%; height:100%;"></div>
    </div>
  </div>
</template>
<script>
import { listZTTJ } from "@/api/archive/bianyan/ztTongji.js"
import * as echarts from "echarts";
export default {
  data() {
    return {
      listZTTJlist: [],

    }
  },
  created() {
    var that = this;
    listZTTJ().then(res => {
      if (res.code = "200") {
        var list = [];
        var damlCountAlL = 0;
        var zlmlCountAlL = 0;
        var dataEcharts=[];
        var damldataEcharts=[];
        var zlmldataEcharts=[];
        for (var i in res.data) {
          res.data[i]["allCount"] = res.data[i].damlCount + res.data[i].zlmlCount;
          damlCountAlL += res.data[i].damlCount;
          zlmlCountAlL += res.data[i].zlmlCount;
          list.push(res.data[i])
          dataEcharts.push(res.data[i].typeName)
          damldataEcharts.push(res.data[i].damlCount)
          zlmldataEcharts.push(res.data[i].zlmlCount)
        }
        var data = {
          allCount: damlCountAlL + zlmlCountAlL,
          damlCount: damlCountAlL,
          typeName: "小计",
          zlmlCount: zlmlCountAlL
        }
        list.splice(list.length, 0, data)
        this.listZTTJlist = list;
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('myChart'));
         var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['资料目录（条）', '档案目录（条）']
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',

            },
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: dataEcharts
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '资料目录（条）',
                type: 'bar',
                barGap: 0,

                emphasis: {
                  focus: 'series'
                },
                data:zlmldataEcharts
              },
              {
                name: '档案目录（条）',
                type: 'bar',

                emphasis: {
                  focus: 'series'
                },
                data:damldataEcharts
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        })
      }
    })
  }
}
</script>
<style lang="scss" scoped></style>